import React, { Component } from 'react'
import { Toast } from 'antd-mobile';
import './Detail.less'
import { reqAddShop, reqDetailInfo } from '../../http/api';
import Header from '../../components/Header';
import Deinfo from './DeInfo/Deinfo';
// 改为容器型组件
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import { actions, getList } from '../../store/modules/detail';
import { getInfo } from '../../store/modules/login'
class Detail extends Component {
    // 一进页面就发请求
    componentDidMount() {
        let { detail: { reqDetailAction } } = this.props;
        // 取出id
        console.log(this.props);

        let id = this.props.match.params.id
        let type = this.props.match.params.type
        reqDetailAction({
            id: id, type,
        })

    }
    render() {
        let { list, detail: { reqAddShopAction } } = this.props
        let id = this.props.match.params.id
        let type = this.props.match.params.type
        let uid = this.props.info.uid
        return (
            <div className="detail">
                {/* 头部组件 */}
                <Header title="商品详情" back></Header>
                <Deinfo info={list}></Deinfo>
                <footer className="footer">
                    <div className="goShop" onClick={() => this.props.history.push('/index/shop')}>去购物车</div>
                    <div className="plus" onClick={() => reqAddShopAction({ goodsid:id, type, uid, num: 1 })}>加入购物车</div>
                </footer>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        list: getList(state),
        info: getInfo(state)
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        // 整合组件
        detail: bindActionCreators(actions, dispatch),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)
